<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备管理 - MQTT服务器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            border-radius: 15px;
            padding: 25px 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .device-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }
        
        .device-info h1 {
            color: #4a5568;
            font-size: 2.2em;
            margin-bottom: 5px;
        }
        
        .device-info p {
            color: #718096;
            font-size: 1.1em;
        }
        
        .status-badge {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 600;
            background: #c6f6d5;
            color: #22543d;
        }
        
        .back-btn {
            background: #e2e8f0;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            font-weight: 600;
            color: #4a5568;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .back-btn:hover {
            background: #cbd5e0;
            transform: translateY(-2px);
        }
        
        .management-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
        }
        
        .management-card {
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .management-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        
        .management-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--accent-color);
        }
        
        .card-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
            margin-bottom: 20px;
            background: var(--accent-color);
        }
        
        .card-title {
            font-size: 1.4em;
            font-weight: bold;
            color: #2d3748;
            margin-bottom: 10px;
        }
        
        .card-description {
            color: #718096;
            font-size: 1em;
            line-height: 1.5;
            margin-bottom: 15px;
        }
        
        .card-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .status-text {
            font-size: 0.9em;
            color: #a0aec0;
        }
        
        .arrow-icon {
            color: #cbd5e0;
            font-size: 18px;
            transition: all 0.3s ease;
        }
        
        .management-card:hover .arrow-icon {
            color: var(--accent-color);
            transform: translateX(5px);
        }
        
        /* 不同卡片的主题色 */
        .system-card { --accent-color: #4299e1; }
        .door-card { --accent-color: #48bb78; }
        .language-card { --accent-color: #ed8936; }
        .record-card { --accent-color: #9f7aea; }
        .device-card { --accent-color: #38b2ac; }
        .member-card { --accent-color: #f56565; }
        .password-card { --accent-color: #ec4899; }
        
        .stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }
        
        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: var(--accent-color);
            margin-bottom: 8px;
        }
        
        .stat-label {
            color: #718096;
            font-size: 0.9em;
        }
        
        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
            
            .management-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-row {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 设备信息头部 -->
        <div class="header">
            <div class="header-left">
                <div class="device-icon">📱</div>
                <div class="device-info">
                    <h1 id="deviceName">HarmonyOS设备1</h1>
                    <p>
                        <span class="status-badge" id="deviceStatus">在线</span>
                        <span style="margin-left: 15px; color: #a0aec0;">最后活跃: <span id="lastSeen">刚刚</span></span>
                    </p>
                </div>
            </div>
            <button class="back-btn" onclick="goBack()">
                ← 返回主页
            </button>
        </div>
        
        <!-- 统计信息 -->
        <div class="stats-row">
            <div class="stat-card system-card">
                <div class="stat-number" style="--accent-color: #4299e1;">24</div>
                <div class="stat-label">系统运行天数</div>
            </div>
            <div class="stat-card door-card">
                <div class="stat-number" style="--accent-color: #48bb78;">156</div>
                <div class="stat-label">柜门总数</div>
            </div>
            <div class="stat-card record-card">
                <div class="stat-number" style="--accent-color: #9f7aea;">1,234</div>
                <div class="stat-label">操作记录</div>
            </div>
            <div class="stat-card member-card">
                <div class="stat-number" style="--accent-color: #f56565;">89</div>
                <div class="stat-label">注册会员</div>
            </div>
        </div>
        
        <!-- 管理功能网格 -->
        <div class="management-grid">
            <!-- 系统管理 -->
            <div class="management-card system-card" onclick="openPage('system')">
                <div class="card-icon">⚙️</div>
                <div class="card-title">系统管理</div>
                <div class="card-description">
                    系统配置、参数设置、固件更新、系统监控等核心功能管理
                </div>
                <div class="card-status">
                    <span class="status-text">系统正常运行</span>
                    <span class="arrow-icon">→</span>
                </div>
            </div>
            
            <!-- 柜门管理 -->
            <div class="management-card door-card" onclick="openPage('door')">
                <div class="card-icon">🚪</div>
                <div class="card-title">柜门管理</div>
                <div class="card-description">
                    柜门状态监控、开锁控制、故障检测、维护管理等功能
                </div>
                <div class="card-status">
                    <span class="status-text">152门正常，4门维护中</span>
                    <span class="arrow-icon">→</span>
                </div>
            </div>
            
            <!-- 语言设置 -->
            <div class="management-card language-card" onclick="openPage('language')">
                <div class="card-icon">🌐</div>
                <div class="card-title">语言设置</div>
                <div class="card-description">
                    多语言支持、界面语言切换、语音播报语言配置
                </div>
                <div class="card-status">
                    <span class="status-text">当前: 简体中文</span>
                    <span class="arrow-icon">→</span>
                </div>
            </div>
            
            <!-- 记录管理 -->
            <div class="management-card record-card" onclick="openPage('record')">
                <div class="card-icon">📋</div>
                <div class="card-title">记录管理</div>
                <div class="card-description">
                    操作日志查看、数据统计分析、记录导出、历史追踪
                </div>
                <div class="card-status">
                    <span class="status-text">今日新增 45 条记录</span>
                    <span class="arrow-icon">→</span>
                </div>
            </div>
            
            <!-- 设备管理 -->
            <div class="management-card device-card" onclick="openPage('device')">
                <div class="card-icon">🔧</div>
                <div class="card-title">设备管理</div>
                <div class="card-description">
                    硬件状态监控、设备配置、网络设置、远程诊断
                </div>
                <div class="card-status">
                    <span class="status-text">所有设备运行正常</span>
                    <span class="arrow-icon">→</span>
                </div>
            </div>
            
            <!-- 会员管理 -->
            <div class="management-card member-card" onclick="openPage('member')">
                <div class="card-icon">👥</div>
                <div class="card-title">会员管理</div>
                <div class="card-description">
                    用户信息管理、权限设置、会员等级、积分系统
                </div>
                <div class="card-status">
                    <span class="status-text">89 位活跃会员</span>
                    <span class="arrow-icon">→</span>
                </div>
            </div>
            
            <!-- 密码管理 -->
            <div class="management-card password-card" onclick="openPage('password')">
                <div class="card-icon">🔐</div>
                <div class="card-title">密码管理</div>
                <div class="card-description">
                    管理员密码、用户密码重置、安全策略、访问控制
                </div>
                <div class="card-status">
                    <span class="status-text">安全等级: 高</span>
                    <span class="arrow-icon">→</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取URL参数中的设备名称
        function getDeviceName() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('device') || 'HarmonyOS设备1';
        }
        
        // 初始化页面
        function initPage() {
            const deviceName = getDeviceName();
            document.getElementById('deviceName').textContent = deviceName;
            document.title = `${deviceName} - 设备管理`;
            
            // 模拟加载设备状态
            loadDeviceStatus(deviceName);
        }
        
        // 加载设备状态
        async function loadDeviceStatus(deviceName) {
            try {
                const response = await fetch('/api/devices');
                const devices = await response.json();
                const device = devices.find(d => d.name === deviceName || d.device_id === deviceName);
                
                if (device) {
                    const statusElement = document.getElementById('deviceStatus');
                    const lastSeenElement = document.getElementById('lastSeen');
                    
                    statusElement.textContent = device.status === 'online' ? '在线' : '离线';
                    statusElement.className = `status-badge ${device.status === 'online' ? '' : 'offline'}`;
                    
                    if (device.last_seen) {
                        const lastSeenTime = new Date(device.last_seen);
                        const now = new Date();
                        const diffMinutes = Math.floor((now - lastSeenTime) / (1000 * 60));
                        
                        if (diffMinutes < 1) {
                            lastSeenElement.textContent = '刚刚';
                        } else if (diffMinutes < 60) {
                            lastSeenElement.textContent = `${diffMinutes}分钟前`;
                        } else {
                            lastSeenElement.textContent = lastSeenTime.toLocaleString();
                        }
                    }
                }
            } catch (error) {
                console.error('加载设备状态失败:', error);
            }
        }
        
        // 返回主页
        function goBack() {
            window.location.href = '/';
        }
        
        // 打开功能页面
        function openPage(pageType) {
            const deviceName = getDeviceName();
            
            // 根据不同的页面类型跳转到对应的管理页面
            switch(pageType) {
                case 'system':
                    alert('系统管理页面开发中...\n\n功能包括：\n• 系统配置\n• 参数设置\n• 固件更新\n• 系统监控');
                    break;
                case 'door':
                    window.location.href = `/door-management.html?device=${encodeURIComponent(deviceName)}`;
                    break;
                case 'language':
                    alert('语言设置页面开发中...\n\n功能包括：\n• 多语言支持\n• 界面语言切换\n• 语音播报配置');
                    break;
                case 'record':
                    alert('记录管理页面开发中...\n\n功能包括：\n• 操作日志查看\n• 数据统计分析\n• 记录导出\n• 历史追踪');
                    break;
                case 'device':
                    alert('设备管理页面开发中...\n\n功能包括：\n• 硬件状态监控\n• 设备配置\n• 网络设置\n• 远程诊断');
                    break;
                case 'member':
                    alert('会员管理页面开发中...\n\n功能包括：\n• 用户信息管理\n• 权限设置\n• 会员等级\n• 积分系统');
                    break;
                case 'password':
                    alert('密码管理页面开发中...\n\n功能包括：\n• 管理员密码\n• 用户密码重置\n• 安全策略\n• 访问控制');
                    break;
                default:
                    alert('页面开发中...');
            }
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initPage();
            
            // 定期更新设备状态
            setInterval(() => {
                loadDeviceStatus(getDeviceName());
            }, 30000); // 每30秒更新一次
        });
        
        // 添加离线状态样式
        const style = document.createElement('style');
        style.textContent = `
            .status-badge.offline {
                background: #fed7d7;
                color: #742a2a;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>